<template>
  <div class="layout-col flex5 bss ml16">
    <div class="ww100 flex-bc plr12 ptb8 bs4">
      <div class="flex-sc">
        <span class="f15 fw">
          {{isNull(publicStore.active)?'':publicStore.active.name + '用户'}}
          {{publicStore.active.node_type == 0?'(组织)':'(厂站)'}}
          </span>
      </div>
      <div class="flex-ec flex1 h30">
        <div class="bgi3 rad4 ptb6 plr10 flex-cc cursor white ml10" @click.stop="handleClick('aclchan')">
          <i-ep-position class="f12 fw" /><span class="f14 ml5">下发</span>
        </div>
        <div class="rad4 ptb6 plr10 flex-cc cursor bgi3 white ml10" 
          v-if="state.content.find(v=>{return typeof(v.key) == 'object'}) && state.content.find(v=>{return typeof(v.key) == 'object'})['key'].hasOwnProperty('add')" 
          @click.stop="handleClick('add', state.addItem)">
          <i-ep-plus class="f12 fw" /><span class="f14 ml5">{{state.content.find(v=>{return typeof(v.key) == 'object'})['key'].add}}</span>
        </div>
      </div>
    </div>
    <div class="row bgi22">
      <div :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i" v-show="v.show" :class="typeof(v.key) == 'object'?v.width +' '+ 'mlr5':v.width">{{v.name}}</div>
    </div>
    <div class="table">
      <div class="row" :class="publicStore.active[state.key] == item[state.key]?'active':index%2 == 1?'bgi23':'bgi18'" v-for="(item, index) in state.list" :key="index" @click="handleClick('active', item)">
        <div v-show="v.show" :class="v.width" :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i">
          <span v-if="typeof(v.key) == 'object'" class="i21 cursor mlr5" :class="kk=='add'?'none':''" v-for="(vv, kk, ii) in v.key" :key="ii" @click.stop="handleClick(kk, item)">{{vv}}</span>
           <span v-else-if="v.key=='*'">{{index+1}}</span>
          <span v-else-if="v.type == 'time'">{{item[v.key] == 0?'/':parseTime(item[v.key])}}</span>
          <span v-else-if="v.type == 'find'" :class="find(v.value[0], [v.value[1], item[v.key]], 'color')?find(v.value[0], [v.value[1], item[v.key]], 'color'):''">
            {{find(v.value[0], [v.value[1], item[v.key]], v.value[2])}}
          </span>
          <span v-else-if="v.type == 'switch'">
            <el-switch v-model="item[v.key]" :active-text="v.value[1].name" :inactive-text="v.value[0].name" :active-value="v.value[1].value" :inactive-value="v.value[0].value" inline-prompt @change="handleClick('switch', item)"></el-switch>
          </span>
          <span v-else-if="v.type == 'input'"><el-input v-model="item[v.value]" placeholder="请输入" style="width: 150px;" size="small" /></span>
          <span v-else>{{isNull(item[v.key]) && v.key!=''? '/' : item[v.key]}}</span>
        </div>
      </div>
      <div v-if="state.empty" class="flex-cc ww100 tc ptb13 bgi18">没有数据</div>
    </div>
    <Add @init="init" :state="state" ref="exposeRef" />
    <CollectInfo @init="init" ref="collectRef" />
    <Aclchan @init="init" :state="state" ref="aclchanRef" />
  </div>
</template>

<script lang="ts" setup>
  import Add from '@/components/Add'
  import CollectInfo from '@/components/CollectInfo'
	const { proxy }:any = getCurrentInstance()
  const publicStore = proxy.publicStore()
  const configStore = proxy.configStore()
  const state = reactive({
	  ...publicStore.$state,
    key: 'id',
    query: {"o":"o_comm_usr", "p":[], "i":0},
    content: [
      { width: 'w70',   show: true, align: 'center', key: '*', name: '序号' },
      { width: 'w50x3', show: true, align: 'left', key: 'login_name', name: '账号' },
      { width: 'w50x3', show: true, align: 'left', key: 'name', name: '姓名' }, 
      { width: 'w50x3', show: true, align: 'left', key: 'function_role', name: '角色', type: 'find', value: [[], 'id', 'role_name'] }, 
      { width: 'w50x3', show: true, align: 'left', key: 'mobile_phone', name: '电话' },
      { width: 'flex1', show: true, align: 'right', key: {add: '新增', cj: '采集', edit:'编辑', del: '删除', setpd: '重置密码'},  name: '操作' },
    ],
    editField: {},
    editFrom: [
      { required: true, editshow: true,  name: '区域', key: 'area_station_id', type: ['tree', [], 'id', 'up_id', '顶级'] },
      { required: true, editshow: true,  name: '角色', key: 'function_role', type: ['select', [], 'id', 'role_name'] },
      { required: true, editshow: true,  name: '账号', key: 'login_name', type: ['input'] },
      { required: true, editshow: false, name: '密码', key: 'password', type: ['password'] }, 
      { required: true, editshow: true,  name: '名称', key: 'name', type: ['input'] },
      { required: false, editshow: true,  name: '电话', key: 'mobile_phone', type: ['input'], pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, maxlength: 11},
    ],
    editFrom2: [
      { required: true, editshow: 'disabled', key: 'login_name', name: '账号', type: ['input'] },
      { required: true, editshow: true,       key: 'password',   name: '密码', type: ['password'] }, 
    ],
    addItem: {},
  })
  let exposeRef = $ref()
  let collectRef = $ref()
  let aclchanRef = $ref()

  onUnmounted (async() => {
    configStore.ip = ''
  })

  watch(() => publicStore.active, async(val) => {
    await nextTick()
    if(proxy.isNull(val)) return
    state.editFrom[0].key = publicStore.active.node_type == 0 ? 'org_id' : 'area_station_id'
    state.addItem = publicStore.active.node_type == 0 ? {org_id: publicStore.active.id} : {area_station_id: publicStore.active.id}
    state.query.i = publicStore.active.node_type == 0 ? 3 : 0
    state.query.p = [publicStore.active.id]
    init()
  }, {immediate: false, deep: true})

  const setInit = () => {
    state.content.forEach(v => {
      if(v.key == 'function_role') v.value[0] = configStore.roleList
      if(v.key == 'area_station_id') v.value[0] = publicStore._public.list
    })
    state.editFrom.forEach(v => {
      if(v.key == 'function_role') v.type[1] = configStore.roleList
      if(v.key == 'area_station_id' || v.key == 'org_id') v.type[1] = publicStore._public.list
    })
  }

  const init = async() => {
    state.params = {queryApi: state.query}
    let res = await publicStore.post(state.params)
    state.empty = proxy.isNull(res)? true : false
    state.list = proxy.isNull(res)? [] : res
    setInit()
  }

  const getQuery = (val, tempArr=[]) => {
    if(proxy.isNull(val.children)){
      let temp = Object.assign({}, state.query)
      temp.p = [val.id]
      tempArr.push(temp)
    }else{
      val.children.forEach(v => {
        getQuery(v, tempArr)
      })
    }
    return tempArr
  }

  const handleClick = (remark, val) => {
    if(remark == 'add' || remark == 'edit'){
      exposeRef.onVisable(val)
    }
    if(remark == 'del'){
      exposeRef.del(val, state.query, state.key)
    }
    if(remark == 'setpd'){
      exposeRef.onVisable(val, 2)
    }
    if(remark == 'cj'){
      collectRef.onVisable(val)
    }
    if(remark == 'aclchan'){
      aclchanRef.onVisable(val)
    }
  }

</script>
  
<style scoped lang="scss">

</style>
  